<template>
  <div>
    <!-- pc端显示 -->
    <div class="detail_layout">
      <div class="content_top">
        <!-- <div class="content_middle">
          <div class="middle-left">OpenHarmony开发样例</div>
          <div class="middle-rigth">
            <el-menu
              router
              class="el-menu-demo2"
              mode="horizontal"
              @select="handleSelectBtn"
            >
              <el-menu-item
                v-for="routerItem in routerList"
                :key="routerItem.titleId"
                @click="changeTag(routerItem)"
                :class="{ middleMenu: curentTagId == routerItem.titleId }"
              >
                <router-link
                  :to="{
                    name: 'content',
                    query: { titleId: routerItem.titleId },
                  }"
                  >{{ routerItem.name }}</router-link
                >
              </el-menu-item>
            </el-menu>
          </div>
        </div> -->
      </div>
      <div class="content_wrapper">
        <div class="main-txt">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              v-for="breadItem in breadcrumb"
              :key="breadItem.id"
              @click.native="changeBread(breadItem)"
              >{{ breadItem.name }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </div>
        <div class="details">
          <div class="details-text" ref="conScroll">
            <div ref="conScrollTop">
              <div
                v-for="sampleItem in sampleDetailList"
                :key="sampleItem.sampleId"
              >
                <div class="details-title">
                  <div class="title">
                    {{ sampleItem.name }}
                    <img
                      v-if="sampleItem.sign == 1"
                      class="burning"
                      src="../assets/images/fat-burning.png"
                    />
                  </div>
                  <div class="author">{{ "作者：" + sampleItem.author }}</div>
                </div>
                <div class="details-overview">
                  <div id="div1" class="overview item">概述</div>
                  <div class="describe">{{ sampleItem.summary }}</div>
                </div>
                <div class="details-samplate" v-if="sampleItem.imageUrl">
                  <div class="title">样例展示</div>
                  <div class="img">
                    <img :src="sampleItem.imageUrl" alt="">
                  </div>
                </div>
                <div class="details-characteristic">
                  <div class="characteristic">涉及OH技术特性</div>
                  <div class="charact">
                    <span
                      class="line"
                      v-for="item in sampleItem.featureName"
                      :key="item.id"
                    >
                      {{ item }}
                    </span>
                  </div>
                </div>
                <div class="details-characteristic">
                  <div class="characteristic">难度级别</div>
                    <div class="charact">{{sampleItem.difficultyLevel}}</div>
                </div>
              </div>
            </div>
            <div ref="conScrollMain">
              <div class="details-base">
                <div id="div2" class="base item">基础信息</div>
                <div class="table">
                  <el-table :data="baseInfoList" border>
                    <el-table-column prop="versionNo" label="开发板">
                    </el-table-column>
                    <el-table-column prop="deviceLevel" label="设备级别">
                    </el-table-column>
                    <el-table-column prop="sysVersion" label="OpenHarmony版本">
                    </el-table-column>
                  </el-table>
                </div>
              </div>
              <div class="details-button">
                <button
                  v-for="item in sampleDetailList"
                  :key="item.sampleId"
                  class="button"
                >
                  <span @click="openHtml(item)">进入代码仓</span>
                  <!-- <span>
                    <a :href="item.gitUrl" :src="item.gitUrl">进入代码仓 </a>
                  </span> -->
                </button>
              </div>
            </div>
            <div ref="conScrollBtn">
              <div class="details-material">
                <div id="div3" class="material item">相关资料</div>
                <div class="material-message">
                  <div
                    v-for="detailItem in typeDetailList"
                    :key="detailItem.id"
                  >
                    <div class="material-title">
                      <img v-if="detailItem.name === '开发板'" src="../assets/images/board.png" alt="">
                      <img v-else-if="detailItem.name === '文章'" src="../assets/images/article.png" alt="">
                      <img v-else-if="detailItem.name === '视频课程'" src="../assets/images/vedio.png" alt="">
                      <img v-else-if="detailItem.name === '书籍'" src="../assets/images/book.png" alt="">
                      <img v-else-if="detailItem.name === '官方资料'" src="../assets/images/info.png" alt="">
                      <span>{{ detailItem.name }}：</span>
                    </div>
                    <div class="material-text" v-if="detailItem.description">
                      <div
                        v-for="(
                          descriptionItem, index
                        ) in detailItem.description"
                        :key="index"
                      >
                        <span
                          class="text-name"
                          @click="openUrl(detailItem.url[index])"
                          >{{ descriptionItem }}</span
                        >
                        <!-- <a
                            v-for="(urlItem, index) in detailItem.url"
                            :key="index"
                            :href="urlItem"
                            >{{ descriptionItem }}</a
                          > -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="details-position">
            <div
              v-for="item in menuList"
              :key="item.id"
              class="menuItem"
              :class="{ activeMenu: currentMenuId === item.id }"
              @click="currentMenuId = item.id"
            >
              <a :href="'#div' + item.id">{{ item.name }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 移动端显示 -->
    <div class="mobile_layout">
      <div class="scroll-wrapper">
        <div class="content_top">
          <div class="main-txt">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                v-for="breadItem in breadcrumb"
                :key="breadItem.id"
                >{{ breadItem.name }}</el-breadcrumb-item
              >
            </el-breadcrumb>
          </div>
        </div>
        <div class="content_wrapper">
          <div class="details">
            <div class="details-text">
              <div
                v-for="sampleItem in sampleDetailList"
                :key="sampleItem.sampleId"
              >
                <div class="details-title">
                  <div class="title">
                    {{ sampleItem.name}}
                    <img
                      v-if="sampleItem.sign == 1"
                      class="burning"
                      src="../assets/images/fat-burning.png"
                    />
                  </div>
                  <div class="author">{{ "作者：" + sampleItem.author }}</div>
                </div>
                <div class="details-overview">
                  <div class="overview">概述</div>
                  <div class="describe">{{ sampleItem.summary }}</div>
                </div>
                <div class="details-samplate" v-if="sampleItem.imageUrl">
                    <div class="title">样例展示</div>
                    <div class="img">
                      <img :src="sampleItem.imageUrl" alt="">
                    </div>
                  </div>
                <div class="details-characteristic">
                  <div class="characteristic">涉及OH技术特性</div>
                  <div class="charact">
                    <span v-for="item in sampleItem.featureName" :key="item.id">
                      {{ item }}
                    </span>
                  </div>
                </div>
                <div class="details-characteristic">
                  <div class="characteristic">难度级别</div>
                  <div class="charact">{{sampleItem.difficultyLevel}}</div>
                </div>
              </div>
              <div>
                <div class="details-base">
                  <div class="base">基础信息</div>
                  <div class="table">
                    <el-table :data="baseInfoList" border>
                      <el-table-column prop="versionNo" label="开发板">
                      </el-table-column>
                      <el-table-column prop="deviceLevel" label="设备级别">
                      </el-table-column>
                      <el-table-column prop="sysVersion" label="OpenHarmony版本">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
                <div class="details-button">
                  <button
                    v-for="item in sampleDetailList"
                    :key="item.sampleId"
                    class="button"
                    @click="openHtml(item)"
                  >
                    进入代码仓
                  </button>
                </div>
              </div>
              <div>
                <div class="details-material">
                  <div class="material">相关资料</div>
                  <div class="material-message">
                    <div
                      v-for="detailItem in typeDetailList"
                      :key="detailItem.id"
                    >
                      <div class="material-title">
                        <img v-if="detailItem.name === '开发板'" src="../assets/images/board.png" alt="">
                        <img v-else-if="detailItem.name === '文章'" src="../assets/images/article.png" alt="">
                        <img v-else-if="detailItem.name === '视频课程'" src="../assets/images/vedio.png" alt="">
                        <img v-else-if="detailItem.name === '书籍'" src="../assets/images/book.png" alt="">
                        <img v-else-if="detailItem.name === '官方资料'" src="../assets/images/info.png" alt="">
                        <span>{{ detailItem.name }}：</span>
                      </div>
                      <div class="material-text" v-if="detailItem.description">
                        <div
                          v-for="(
                            descriptionItem, index
                          ) in detailItem.description"
                          :key="index"
                        >
                          <template v-if="detailItem.url">
                            <span
                              class="text-name"
                              @click="openUrl(detailItem.url[index])"
                              >{{ descriptionItem }}</span
                            >
                            <!-- <a
                              class="text-name"
                              v-for="(urlItem, index) in detailItem.url"
                              :key="index"
                              :href="urlItem"
                              >{{ descriptionItem }}</a
                            > -->
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import slipeNav from "./commonComponent/slipeNav.vue";
import scrollNav from "./commonComponent/scrollNav.vue";
import { mapActions, mapState } from "vuex";
export default {
  components: {
    slipeNav,
    scrollNav,
  },
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      menuList: [
        { id: 1, name: "概述" },
        { id: 2, name: "基础信息" },
        { id: 3, name: "相关资料" },
      ],
      currentId: 1,
      childrenHeightArr: [],
      baseInfoList: [],
      curentTagId: 1,
      tabPosition: "right",
      typeDetailList: [],
      sampleDetailList: [],
      sampleId: 1,
      scroll: "",
      currentMenuId: 1,
      imgSrc: null, //样例展示图片路径
    };
  },
  created() {
    this.searchDetail();
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  computed: {
    ...mapState({
      breadcrumb: (state) => state.breadcrumb.breadData,
      routerList: (state) => state.initData.titleList,
    }),
  },
  methods: {
    ...mapActions(["setBreadcrumb", "getInitDetail"]),
    async searchDetail() {
      if (this.$route.query.sampleId) {
        this.sampleId = this.$route.query.sampleId;
      } else {
        this.sampleId = localStorage.getItem("sampleId");
      }
      let res = await this.$axios.get(
        "/knowledge/frontPage/querySampleDetail",
        {
          params: {
            sampleId: this.sampleId,
            // sampleId: 968,
          },
        }
      );
      if (res.data.code == 0) {
        this.baseInfoList = res.data.data.baseInfoList;
        res.data.data.sampleDetailList.map((item) => {
          item.featureName = item.featureName.split(",");
        });
        this.sampleDetailList = res.data.data.sampleDetailList;
        res.data.data.typeDetailList.forEach((item) => {
          if (item.description) {
            item.description = item.description.split(",");
          }
          if (item.url) {
            item.url = item.url.split(",");
          }
        });
        this.typeDetailList = this.infoSort(res.data.data.typeDetailList)
      }
    },
    openHtml(item) {
      window.open(item.gitUrl);
    },
    openUrl(urlItem) {
      window.open(urlItem);
    },
    handleSelectBtn(key, keyPath) {
    },
    changeTag(routerItem) {
      this.curentTagId = routerItem.titleId;
      let curentName = routerItem.name;
      let flagLevel = 0;
      let flagId = routerItem.titleId;
      this.setBreadcrumb(routerItem);
    },
    changehandleNav(index) {
      this.$router.push({ name: "content" });
    },
    changeBread(breadItem) {},
    dataScroll() {
      this.scroll =
        document.documentElement.scrollTop || document.body.scrollTop;
    },
    getOffsetTop(obj) {
      let offsetTop = 0;
      while (obj != window.document.body && obj != null) {
        offsetTop += obj.offsetTop;
        obj = obj.offsetParent;
      }
      return offsetTop;
    },
    handleScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      this.scrollTop = scrollTop;
      if (!this.scrollTop) return;
      let menus = document.querySelectorAll(".item");
      let offsetTop1 = this.getOffsetTop(menus[0]) - 200;
      let offsetTop2 =
        this.getOffsetTop(menus[1]) - this.getOffsetTop(menus[0]) - 100;
      let offsetTop3 =
        this.getOffsetTop(menus[2]) - this.getOffsetTop(menus[1]) - 100;

      if (this.scrollTop >= offsetTop1 && this.scrollTop < offsetTop2) {
        this.currentMenuId = 1;
      } else if (this.scrollTop >= offsetTop2 && this.scrollTop < offsetTop3) {
        this.currentMenuId = 2;
      } else if (this.scrollTop >= offsetTop3) {
        this.currentMenuId = 3;
      } else {
        this.currentMenuId = 1;
      }
    },
    //相关资料排序
    infoSort(data){
      let titleArr = ["开发板","文章","官方资料","视频课程","书籍"]
      let result = []
      titleArr.forEach((title)=>{
        for(let i = 0 ; i < data.length; i++){
          if(title === data[i].name){
            result.push(data[i])
            break
          }
        }
      })
      return result
    }
  },
  watch: {
    // scroll: {
    //   handler() {
    //     this.loadScroll();
    //   },
    //   immediate: true,
    // },
  },
};
</script>
<style lang="less" scoped>
.mobile_layout {
  display: none !important;
}
.detail_layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  // height: 1180px;
  height: calc(100vh - 110px);
  overflow-y: hidden;
  position: relative;
  // overflow-y: scroll;
  .content_top {
    // width: 70%;
    .content_middle {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: 60px;
      background-color: #ffffff;
      border-bottom: 1PX solid rgba(0, 0, 0, 0.08);
      .middle-left {
        padding-top: 18px;
        padding-bottom: 14px;
        padding-left: 40px;
        height: 28px;
        font-size: 24px;
        font-family: HarmonyOS_Sans_SC_Medium;
        color: #333333;
        line-height: 28px;
      }
      .middle-rigth {
        ::v-deep .el-menu {
          border: 0;
          .el-menu-item {
            font-size: 16px;
            border: 0;
            // .router-link-active {
            //   border-bottom: 2px solid #000000;
            // }
          }
          .middleMenu {
            border-bottom: 2px solid #000000 !important;
          }
        }
      }
    }
  }
  .content_wrapper {
    display: flex;
    flex-direction: column;
    margin-left: 21%;
    overflow-y: auto;
    // border: 1px solid #000000;
    .main-txt {
      min-width: 58%;
      height: 28px;
      line-height: 28px;
      margin-top: 43px;
      ::v-deep .el-breadcrumb__item {
        color: rgba(0, 0, 0, 1) !important;
        opacity: 0.5;
      }
    }
    .details {
      margin-bottom: 20px;
      display: flex;
      flex-direction: row;
      // width: 100vw;
      // height: 100vh;
      width: 100%;
      // min-height: 61%;

      .details-text {
        width: 75%;
        // border: 1px solid #000000;
        .details-title {
          margin-top: 24px;
          .title {
            // width: 348px;
            height: 72px;
            font-size: 38px;
            font-family: HarmonyOS_Sans_SC_Light;
            color: #181818;
            line-height: 72px;
            
            img{
              width: 40px;
              height: 40px;
              margin-top: -16px;
            }
          }
          .author {
            // width: 112px;
            height: 19px;
            font-size: 14px;
            font-family: HarmonyOS_Sans_SC;
            color: #000000;
            line-height: 19px;
            opacity: 0.5;
          }
        }
        .details-overview {
          margin-top: 48px;
          .overview {
            // width: 48px;
            width: 100%;
            height: 34px;
            font-size: 24px;
            font-family: HarmonyOS_Sans_SC_Medium;
            color: #000000;
            line-height: 34px;
            opacity: 0.9;
          }
          .describe {
            // width: 390px;
            // height: 50px;
            margin-top: 16px;
            margin-bottom: 16px;
            font-size: 16px;
            font-family: HarmonyOS_Sans_SC;
            color: #000000;
            line-height: 23px;
            opacity: 0.9;
            // display: -webkit-box;
            // -webkit-box-orient: vertical;
            // -webkit-line-clamp: 2;
            // overflow: hidden;
          }
        }
        .details-samplate{
          margin-top: 48px;
          .title{
            font-size: 24px;
            font-family: HarmonyOS_Sans_SC_Medium;
            color: #000000;
            line-height: 34px;
            opacity: 0.9;
          }
          .img{
            margin-top: 29px;
            img{
              width: 560px;
              // height: 324px;
              border-radius: 2px;
            }

          }

        }
        .details-characteristic {
          margin-top: 48px;
          .characteristic {
            // width: 80px;
            // height: 23px;
            font-size: 24px;
            font-family: HarmonyOS_Sans_SC_Medium;
            color: #000000;
            line-height: 34px;
            opacity: 0.9;
          }
          .charact {
            font-size: 16px;
            line-height: 23px;
            margin-top: 16px;
            margin-right: 40px;
            color: #333333;
            opacity: 0.9;
            .line {
              margin: 0 30px 0 15px;
              position: relative;
            }
            .line:after {
              content: "";
              width: 6px;
              height: 6px;
              background: #000;
              border-radius: 50%;
              position: absolute;
              left: -15px;
              top: 8px;
              // top: 50%;
              // transform: translateY(-50%);
            }
          }
        }
        .details-base {
          margin-top: 48px;
          .base {
            // width: 96px;
            height: 34px;
            font-size: 24px;
            font-family: HarmonyOS_Sans_SC_Medium;
            color: #000000;
            line-height: 34px;
            opacity: 0.9;
          }
          .table {
            margin-top: 18px;
            ::v-deep .el-table--border {
              width: 70%;
              .el-table__header {
                width: 25%;
                .el-table__cell {
                  min-height: 47px !important;
                  max-height: 94px !important;
                  background-color: #e8eaed !important;
                  font-size: 16px;
                  font-family: HarmonyOS_Sans_SC_Medium;
                  font-weight: normal;
                  color: #000000;
                  opacity: 0.9;
                }
              }
              .el-table__row {
                min-height: 48px !important;
                max-height: 96px !important;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC;
                color: #000000;
                opacity: 0.9;
              }
            }
          }
        }
        .details-button {
          margin-top: 30px;
          margin-left: 1px;
          .button {
            // width: 9%;
            width: 144px;
            height: 46px;
            background: #000000;
            border-radius: 31px;
            border: none;
            font-size: 16px;
            font-family: HarmonyOS_Sans_SC;
            color: #ffffff;
            cursor: pointer;
          }
        }
        .details-material {
          margin-top: 48px;
          .material {
            // width: 96px;
            height: 34px;
            font-size: 24px;
            font-family: HarmonyOS_Sans_SC_Medium;
            color: #333333;
            line-height: 34px;
            opacity: 0.9;
          }
          .material-message {
            margin-top: 26px;
            > div {
              margin-bottom: 31px;
              .material-title {
                // width: 100px;
                height: 36px;
                font-size: 20px;
                font-family: HarmonyOS_Sans_SC_Medium;
                color: #333333;
                line-height: 36px;
                margin-bottom: 12px;
                img{
                  width: 36px;
                  height: 36px;
                  display: inline;
                  margin-right: 10px;
                }
              }
              .material-text {
                // width: 303px;
                // height: 23px;
                font-size: 16px;
                font-family: HarmonyOS_Sans_SC;
                color: #000000;
                line-height: 23px;
                cursor: pointer;
                > div {
                  margin-bottom: 8px;
                  &:hover {
                    color: #328dff;
                  }
                }
              }
            }
          }
        }
      }
      .details-position {
         position: absolute;
          top: 92px;
          right: 13%;
        .menuItem {
          padding: 0 0 8px 12px;
          padding-left: 15px;
          border-left: 2px solid #d7d7d7;
          line-height: 17px;
          position: relative;
          a{
            font-size: 12px;
            color: #000000; 
           
          }
        }
        .menuItem:last-child{
          padding: 0 0 0 15px !important;
        }
        .activeMenu {
          // border-left: 1px solid #d7d7d7;
          padding-left: 15px;
           &:before{
              content: '';
              position: absolute;
              top: 0;
              left:  -2px;
              width: 2px;
              height: 17px;
              background: #000000;
            }
        }
      }
    }
  }
}
@media screen and (max-width: 540px) {
  .detail_layout {
    display: none !important;
  }
  .mobile_layout {
    display: block !important;
    background-color: #fafafa;
    height: calc(100vh - 126px);
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }

    .scroll-wrapper{
    .content_top {
      .main-txt {
        width: 100%;
        min-height: 60px;
        padding: 16px 12px;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        .el-breadcrumb {
          line-height: 28px;
        }
      }
    }
    .content_wrapper {
      display: flex;
      flex-direction: column;
      background: #fafafa !important;
      // padding-left: 12px;
      // border: 1px solid #000000;
      .details {
        display: flex;
        flex-direction: row;
        width: 100%;
        // min-height: 1180px;
        .details-text {
          width: 375px !important;
          padding: 0 12px;
          // border: 1px solid #000000;
          .details-title {
            .title {
              // width: 203px;
              height: 56px;
              font-size: 28px;
              font-family: HarmonyOS_Sans_SC_Light;
              color: #181818;
              line-height: 56px;
              img{
                width: 32px;
                height: 32px;
                margin-top: -7px;
              }
            }
            .author {
              width: 112px;
              height: 19px;
              font-size: 14px;
              font-family: HarmonyOS_Sans_SC_Light;
              color: #000000;
              line-height: 17px;
              opacity: 0.6;
            }
          }
          .details-overview {
            margin-top: 48px;
            .overview {
              // width: 48px;
              height: 34px;
              font-size: 24px;
              font-family: HarmonyOS_Sans_SC_Medium;
              color: #000000;
              line-height: 29px;
              margin-bottom: 10px;
              opacity: 0.9;
            }
            .describe {
              width: 351px;
              // height: 40px;
              font-size: 14px;
              font-family: HarmonyOS_Sans_SC;
              color: #000000;
              line-height: 17px;
              opacity: 0.9;
              // overflow-y: scroll;
            }
          }
           .details-samplate{
            margin-top: 48px;
            .title{
              font-size: 24px;
              font-family: HarmonyOS_Sans_SC_Medium;
              color: #000000;
              line-height: 34px;
              opacity: 0.9;
            }
            .img{
              margin-top: 14px;
              width: 100%;
              img{
                width: 100%;
                border-radius: 2px;
              }

            }

          }
          .details-characteristic {
            margin-top: 48px;
            .characteristic {
              font-size: 24px;
              font-family: HarmonyOS_Sans_SC_Medium;
              color: #000000;
              line-height: 34px;
              margin-bottom: 13px;
              opacity: 0.9;
            }
            .charact {
              // height: 46px;
              font-size: 16px;
              font-family: HarmonyOS_Sans_SC;
              color: #000000;
              line-height: 23px;
              margin-right: 15px;
              position: relative;
              opacity: 0.9;
              > span {
                font-size: 16px;
                margin: 0 30px 0 15px;
                position: relative;
              }
              > span:after {
                content: "";
                width: 6px;
                height: 6px;
                background: #000;
                border-radius: 50%;
                position: absolute;
                left: -15px;
                top: 8px;
                // top: 50%;
                // transform: translateY(-50%);
              }
            }
          }
          .details-base {
            margin-top: 48px;
            .base {
              font-size: 24px;
              font-family: HarmonyOS_Sans_SC_Medium;
              color: #333333;
              line-height: 29px;
              margin-bottom: 16px;
              opacity: 0.9;
            }
            .table {
              ::v-deep .el-table--border {
                .el-table__header {
                  // width: 20%;
                  .el-table__cell {
                    height: 47px !important;
                    background-color: #e8eaed !important;
                    font-size: 16px;
                    font-family: HarmonyOS_Sans_SC_Medium;
                    color: #000000;
                    opacity: 0.9;
                  }
                }
                .el-table__row {
                  height: 48px !important;
                  font-size: 16px;
                  font-family: HarmonyOS_Sans_SC;
                  color: #000000;
                  opacity: 0.9;
                }
              }
            }
          }
          .details-button {
            margin-top: 24px;
            margin-left:1px;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            .button {
              // position: absolute;
              height: 40px;
              width: 134px;
              margin-right: 10px;
              background: #000000;
              border-radius: 31px;
              color: #fff;
              font-size: 12px;
              border: none;
              span {
                // width: 70px;
                height: 23px;
                font-size: 14px;
                font-family: HarmonyOS_Sans_SC;
                color: #ffffff;
                line-height: 23px;
                a {
                  color: #ffffff;
                }
              }
            }
          }
          .details-material {
            margin-top: 48px;
            .material {
              // width: 96px;
              // height: 34px;
              font-size: 24px !important;
              font-family: HarmonyOS_Sans_SC_Medium;
              color: #333333;
              line-height: 29px;
              opacity: 0.9;
            }
            .material-message {
              margin-top: 16px !important;
              > div {
                margin-bottom: 24px;
                .material-title {
                  // width: 80px;
                  // height: 23px;
                  font-size: 16px !important;
                  font-family: HarmonyOS_Sans_SC_Medium;
                  color: #000000;
                  line-height: 19px;
                  opacity: 0.9;
                  img{
                    width: 28px;
                    height: 28px;
                    margin-right: 4px;
                  }
                }
                .material-text {
                  // width: 265px;
                  // height: 40px;
                  // font-size: 14px !important;
                  // font-family: HarmonyOS_Sans_SC;
                  // color: #328dff;
                  // line-height: 19px;
                  margin-top: 13px;
                  .text-name {
                    // width: 265px;
                    height: 40px;
                    display: block;
                    width: inherit;
                    height: inherit;
                    overflow-wrap: break-word;
                    font-size: 14px !important;
                    font-family: HarmonyOS_Sans_SC;
                    color: #000000;
                    line-height: 17px;
                    margin-bottom: 8px;
                    opacity: 0.9;
                    &:hover {
                      color: #328dff;
                    }
                  }
                }
              }
            }
          }
        }
        .details-position {
          min-width: 310px;
          border: 1px solid #000000;
        }
      }
    }
    }
  }
}
::v-deep{
  .el-table--border .el-table__cell, .el-table--border .el-table__cell, .el-table--border{
    border-color: #DBDBDB;
  }
  .el-table::before, .el-table--border::after{
    content: unset
  }
  .el-table th.el-table__cell.is-leaf{
    border-bottom: 1px solid #DBDBDB;

  }
}
</style>
